ObservableCollection হলো একটি বিশেষ ধরনের কোলেকশন, যা MVVM প্যাটার্নে ডেটা বাইন্ডিংয়ের জন্য ব্যাপকভাবে ব্যবহৃত হয়। এটি একটি Collection এর মত, তবে এর একটি বিশেষ সুবিধা রয়েছে—যখনই কোলেকশনে কোনো পরিবর্তন হয় (যেমন, আইটেম যোগ, মুছে ফেলা, বা আপডেট করা), তখন সেই পরিবর্তন স্বয়ংক্রিয়ভাবে UI তে প্রতিফলিত হয়।

এটি INotifyCollectionChanged ইন্টারফেস ইমপ্লিমেন্ট করে, যার ফলে UI কে অবহিত করে যে কোলেকশনে কিছু পরিবর্তন হয়েছে।

এই গাইডে, আমরা দেখব কিভাবে ObservableCollection ব্যবহার করে ডায়নামিক ডেটা বাইন্ডিং তৈরি করা যায়।

ObservableCollection কী?

ObservableCollection হল একটি বিশেষ ধরনের কোলেকশন যা System.Collections.ObjectModel নামস্পেসে পাওয়া যায় এবং এটি INotifyPropertyChanged ইন্টারফেসের মতো INotifyCollectionChanged ইন্টারফেস ইমপ্লিমেন্ট করে। এর মাধ্যমে কোলেকশনে কোনো পরিবর্তন ঘটলে, সেই পরিবর্তনটি UI তে স্বয়ংক্রিয়ভাবে রিফ্লেক্ট হয়।

এটি সাধারণত MVVM প্যাটার্নে ব্যবহার হয় যেখানে ViewModel-এ ডেটা পরিবর্তন করলে তা View-এ স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়।

ObservableCollection ব্যবহার করে Dynamic Data Binding

ধরা যাক, আমাদের একটি অ্যাপ্লিকেশন আছে যেখানে ObservableCollection ব্যবহার করে ListBox তে ডাইনামিকভাবে ডেটা প্রদর্শন করতে হবে।

1. Model তৈরি করা

প্রথমে, আমাদের একটি Model তৈরি করতে হবে, যা ডেটা ধারণ করবে। উদাহরণস্বরূপ, একটি Product মডেল তৈরি করা যাক:

public class Product
{
    public string Name { get; set; }
    public decimal Price { get; set; }
}

2. ViewModel তৈরি করা

এখন, ViewModel তৈরি করতে হবে যেখানে আমরা ObservableCollection ব্যবহার করব। এটি Product মডেলের একটি লিস্ট ধারণ করবে এবং UI-এ ডাইনামিক ডেটা বাইন্ডিং করব।

public class ProductViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Product> _products;

    public ObservableCollection<Product> Products
    {
        get { return _products; }
        set
        {
            _products = value;
            OnPropertyChanged(nameof(Products));
        }
    }

    public ProductViewModel()
    {
        // কোলেকশন ইনিশিয়ালাইজ করা
        Products = new ObservableCollection<Product>
        {
            new Product { Name = "Laptop", Price = 50000 },
            new Product { Name = "Smartphone", Price = 30000 },
            new Product { Name = "Tablet", Price = 20000 }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

এখানে ObservableCollection হল আমাদের ডেটা কোলেকশন, যা ViewModel তে থাকছে এবং UI-তে ডাইনামিকভাবে বাইন্ড হবে।

3. XAML এ Data Binding সেট করা

এখন, XAML ফাইল এ ViewModel-এর সাথে Data Binding করতে হবে। আমরা একটি ListBox ব্যবহার করব যেখানে ObservableCollection এর ডেটা প্রদর্শিত হবে।

<Window x:Class="DynamicDataBindingExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Dynamic Data Binding Example" Height="350" Width="525">
    <Window.DataContext>
        <local:ProductViewModel />
    </Window.DataContext>

    <Grid>
        <ListBox ItemsSource="{Binding Products}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Name}" FontWeight="Bold"/>
                        <TextBlock Text="{Binding Price}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Window>

এখানে, ListBox এর ItemsSource প্রপার্টি Products প্রপার্টির সাথে বাইন্ড করা হয়েছে। যখন ViewModel-এ Products কোলেকশনে কোনো পরিবর্তন হবে (যেমন নতুন প্রোডাক্ট যোগ করা বা মুছে ফেলা), তখন এটি UI তে স্বয়ংক্রিয়ভাবে প্রতিফলিত হবে।

4. Data Update

এখন, ধরুন আমাদের অ্যাপ্লিকেশনে একটি বোতাম রয়েছে যার মাধ্যমে আমরা ডেটা আপডেট বা নতুন আইটেম যোগ করতে পারি:

public void AddNewProduct()
{
    Products.Add(new Product { Name = "Headphones", Price = 1500 });
}

যখনই AddNewProduct মেথড কল করা হবে, একটি নতুন প্রোডাক্ট ObservableCollection এ যোগ হবে এবং তা UI তে দেখানো হবে।

5. Button Add Operation

এখন, XAML এ একটি Button যোগ করা যাক, যার মাধ্যমে নতুন প্রোডাক্ট যোগ করা যাবে:

<Button Content="Add Product" Click="AddProduct_Click" />

এবং কোড বিহাইন্ডে:

private void AddProduct_Click(object sender, RoutedEventArgs e)
{
    (this.DataContext as ProductViewModel).AddNewProduct();
}

এখানে, AddProduct_Click ইভেন্ট হ্যান্ডলার ViewModel এর AddNewProduct মেথড কল করে এবং নতুন আইটেম ObservableCollection এ যোগ হয়। কারণ এটি ObservableCollection ব্যবহার করছে, UI তে নতুন আইটেম স্বয়ংক্রিয়ভাবে প্রতিফলিত হবে।

উপসংহার

ObservableCollection একটি শক্তিশালী টুল যা MVVM প্যাটার্নে ডায়নামিক ডেটা বাইন্ডিং সহজ করে তোলে। যখনই কোলেকশনে কোনো পরিবর্তন ঘটে, তা UI তে স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়, যা অ্যাপ্লিকেশনের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। এটি ডেভেলপারদের UI এবং ViewModel এর মধ্যে যোগাযোগ সহজ ও পরিষ্কারভাবে পরিচালনা করতে সহায়ক।